/**
 * @fileOverview
 * 属性选择器
 * @author iNahoo
 * @since 2022/3/3.
 */

import React, {} from 'react';

import attr_bright_ico from '../static/attr_bright_ico.png';
import attr_fire_ico from '../static/attr_fire_ico.png';
import attr_ice_ico from '../static/attr_ice_ico.png';
import attr_thunder_ico from '../static/attr_thunder_ico.png';
import attr_wind_ico from '../static/attr_wind_ico.png';

const mapping = {
  0: attr_wind_ico,
  1: attr_fire_ico,
  2: attr_ice_ico,
  3: attr_thunder_ico,
  4: attr_bright_ico,
}

const AttrIcon = props => {
  const {
    attr,
    size = 36,
  } = props;

  return (
    <>
      <span style={{
        display: 'block',
        backgroundImage: `url(${mapping[attr]})`,
        backgroundRepeat: 'no-repeat',
        backgroundSize: size,
        width: size,
        height: size,
      }}/>
    </>
  );
};

export default AttrIcon;
